<template>
    <div class="news-detail">
        <div class="news-detail__con">
            <CustomBreadcrumb :breadcrumbList="breadcrumbList"></CustomBreadcrumb>
            <div class="news-detail__info">
                <div class="news-detail__title">{{ detail.title }}</div>
                <div class="news-detail__time">{{ detail.createTime }}</div>
                <div class="news-detail__desc" v-html="detail.content"></div>
            </div>
        </div>
    </div>
</template>
<script>
import CustomBreadcrumb from '@/components/CustomBreadcrumb.vue';
import { getNewsDetail } from '@/api/news.js'
export default {
    components: {
        CustomBreadcrumb
    },
    data() {
        return {
            breadcrumbList: [
                {
                    name: '新闻动态',
                    url: '/news',
                },
                {
                    name: '新闻详情',
                    url: '',
                },
            ],
            detail: {},
            id: ''
        }
    },
    mounted() {
        this.id = this.$route.query.id || ''
        this.getData()
    },
    methods: {
        async getData() {
            const res = await getNewsDetail({
                objectId: this.id
            })
            if (res) {
                this.detail = res || []
            }
        }
    }
}
</script>
<style lang="scss">
.news-detail {
    // background-color: #f7f7f7;
    // min-height: 100vh;
    &__con {
        width: 1352px;
        margin: 0 auto;
        overflow: hidden;
        padding-top: 20px;
    }
    &__info {

    }
    &__title {
        font-size: 20px;
        font-weight: bold;
        margin-top: 28px;
    }
    &__time {
        font-size: 12px;
        color: #8c8c8c;
        margin-top: 14px
    }
    &__desc {
        margin-top: 20px;
        border-top: 1px solid #E2E2E2;
        padding: 10px 0;
        line-height: 2;
        img {
            max-width: 100%;
        }
    }
}
</style>